<app-common-page>

        <div class="login-form-body">
            <div class="bgImg-c">
                <img src="../../../../assets/img/login/bg.png" alt="">
            </div>
            <div class="from-c">
                <div class="title-img">
                    <img src="../../../../assets/img/login/bg.png" alt="">
                </div>
                <div class="c-title">
                    <font style="color: #436FFF;">南通网安</font><span>-资产管理平台</span>
                    <p>V1.0.0</p>
                </div>
                <form nz-form class="form" [formGroup]="loginForm" >
    
                    <nz-form-item>
                        <nz-form-control [nzSpan]="24">
                            <nz-input-group [nzSuffix]="suffixTemplate" [nzPrefix]="prefixTemplate">
                                <input class="i-input" nz-input formControlName="loginId" name="loginId" type="text" id="loginId" placeholder="请输入账号" />
                            </nz-input-group>
                            <ng-template #prefixTemplate><i nz-icon type="user"></i></ng-template>
                            <nz-form-explain *ngIf="loginForm.get('loginId').dirty && loginForm.get('loginId').errors">请输入账号!</nz-form-explain>
                        </nz-form-control>
                    </nz-form-item>
                    
                    <nz-form-item>
                        <nz-form-control [nzSpan]="24">
                            <nz-input-group *ngIf='!isShowPSD' [nzSuffix]="prefixTemplatePassword" [nzPrefix]="prefixLock" [nzAddOnAfter]="eyeInvisiblePreSuffix">
                                <input class="i-input" nz-input formControlName="loginPw" name="loginPw" type="password" id="loginPw" placeholder="请输入密码">
                            </nz-input-group>
                            <nz-input-group *ngIf='isShowPSD' [nzSuffix]="prefixTemplatePassword" [nzPrefix]="prefixLock" [nzAddOnAfter]="eyePreSuffix">
                                <input class="i-input" nz-input formControlName="loginPw" name="loginPw" type="text" id="loginPw" placeholder="请输入密码">
                            </nz-input-group>
                            <ng-template #prefixLock><i nz-icon type="lock"></i></ng-template>
                            <ng-template  #eyePreSuffix>
                                <i nz-icon *ngIf='isShowPSD' style="color: #999999;" nzType="eye-invisible" nzTheme="fill" (click)='onShowPSW(loginForm.value)'></i>
                            </ng-template>
                            <ng-template #eyeInvisiblePreSuffix>
                                <i nz-icon *ngIf='!isShowPSD' style="color: #999999;" nzType="eye" nzTheme="fill" (click)='onHidePSW(loginForm.value)'></i>
                            </ng-template>
                            <nz-form-explain *ngIf="loginForm.get('loginPw').dirty && loginForm.get('loginPw').errors">请输入密码!</nz-form-explain>
                        </nz-form-control>
                    </nz-form-item>

                    <nz-form-item>
                        <nz-form-control [nzSpan]="24">
                            <nz-input-group [nzSuffix]="prefixTemplatePassword" [nzPrefix]="prevalidCode" [nzAddOnAfter]="validCodeImg">
                                <input class="i-input" nz-input formControlName="imageCode" name="imageCode" type="text" id="imageCode" placeholder="请输入验证码">
                            </nz-input-group>
                            <ng-template #prevalidCode><i nz-icon nzType="pic-center" nzTheme="outline"></i></ng-template>
                            <ng-template #validCodeImg ><img *ngIf="validateCodeImg" [src]="validateCodeImg" (click)="getvalidateCode()" /></ng-template>
                            <nz-form-explain *ngIf="loginForm.get('loginPw').dirty && loginForm.get('loginPw').errors">请输入密码!</nz-form-explain>
                        </nz-form-control>
                    </nz-form-item>
    
                    <nz-form-item >
                        <nz-form-control >
                                    
                            <a class="login-form-forgot" target="_blank" routerLink="/pages/password/reset">
                                忘记密码？
                            </a>
                            <button  nz-button [nzType]="'primary'" (click)="submit()" [disabled]="loginForm.invalid">登陆</button>
                        </nz-form-control>
                    </nz-form-item>
    
                </form>
            </div>
        </div>

</app-common-page>